"use client";
import { useEffect, useState } from "react";
import React from "react";
import { useRouter } from "next/navigation";
import "./index.css";
import {
  LogoutOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from "@ant-design/icons";
import { Button, Layout, Menu } from "antd";
import { RiHomeSmileFill } from "react-icons/ri";
import { HiDocumentSearch } from "react-icons/hi";

import Image from "next/image";
import HeadIcon from "../../public/computer.svg";
import { setUserAccount } from "../../../utils/defender";
import { ConfigProvider } from "antd";
import zh_TW from "antd/lib/locale/zh_TW";
import AuthCO from "@/components/Auth";
const { Header, Sider, Content } = Layout;

interface Props {
  isShowIcon: boolean;
}

function HeaderIcon(props: Props) {
  const isShowIcon = props.isShowIcon;
  if (isShowIcon)
    return (
      <div className="demo-logo-text-image">
        <Image src={HeadIcon} alt="compeq" width={25} height={25}></Image>
      </div>
    );
  else return <div className="demo-logo-text">績效改善系統</div>;
}

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [collapsed, setCollapsed] = useState(false);
  const router = useRouter();

  useEffect(() => {}, []);

  const RouterChange = (e: any) => {
    router.push(e.key);
  };

  const exit = () => {
    setUserAccount("");
    router.push("/");
  };

  return (
    <ConfigProvider locale={zh_TW}>
      <AuthCO>
        <Layout style={{ height: "100%" }}>
          <Sider
            trigger={null}
            collapsible
            collapsed={collapsed}
            breakpoint="lg"
          >
            <div className="demo-logo-vertical">
              <HeaderIcon isShowIcon={collapsed}></HeaderIcon>
            </div>
            <Menu
              onClick={RouterChange}
              theme="dark"
              mode="inline"
              defaultSelectedKeys={["approve"]}
              items={[
                {
                  key: "/dashboard",
                  label: "首頁",
                  icon: <RiHomeSmileFill />,
                },
                {
                  key: "/dashboard/query",
                  label: "查詢",
                  icon: <HiDocumentSearch />,
                },
              ]}
            />
          </Sider>
          <Layout>
            <Header
              style={{
                padding: 0,
                background: "rgb(230, 230, 230)",
                boxShadow: "0 0 5px 3px rgba(0, 0, 0, 0.5)",
              }}
            >
              <Button
                type="text"
                icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                onClick={() => setCollapsed(!collapsed)}
                style={{
                  fontSize: "16px",
                  width: 64,
                  height: 64,
                }}
              />
              <Button
                shape="circle"
                type="primary"
                className="exitBtn"
                danger
                icon={<LogoutOutlined />}
                onClick={() => {
                  exit();
                }}
              ></Button>
            </Header>
            <Content
              style={{
                margin: "16px 16px",
                padding: 24,
                minHeight: 280,
                height: "auto",
                background: "rgb(200, 200, 200)",
                borderRadius: "10px",
                boxShadow: "0 0 4px 2px rgba(0, 0, 0, 0.5)",
                flex: 1,
              }}
            >
              {children}
            </Content>
          </Layout>
        </Layout>
      </AuthCO>
    </ConfigProvider>
  );
}
